<script setup lang="ts">
import {Grid} from "@element-plus/icons-vue"

const {locales, setLocale, locale} = useI18n()
const route = useRoute()
const activeIndex = ref('/')

function changeLanguage(l: any) {
  setLocale(l.code)
}

onMounted(() => {
  let path = route.fullPath
  if (locale.value !== 'zh-cn') {
    path = path.replace('/' + locale.value, '')
  }
  activeIndex.value = path || '/'
})
</script>

<template>
  <el-header>
    <div class="header_menus">
      <el-image style="width: 56px; height: 100%" src="/og-image.png" fit="cover"/>
      <el-menu
          class="el-menu-header"
          mode="horizontal"
          ref="header_menu"
          background-color="transparent"
          active-text-color="#ffffff"
          :default-active="activeIndex"
      >
        <el-menu-item index="/">
          <NuxtLinkLocale to="/">
            {{ $t('header_menu.home') }}
          </NuxtLinkLocale>
        </el-menu-item>
        <el-menu-item index="/document">
          <NuxtLinkLocale to="https://doc.woaicc.com" target="_blank">
            {{ $t('header_menu.document') }}
          </NuxtLinkLocale>
        </el-menu-item>
        <el-menu-item index="/about">
          <NuxtLinkLocale to="/about">
            {{ $t('header_menu.about') }}
          </NuxtLinkLocale>
        </el-menu-item>
      </el-menu>
      <div class="header_right">
        <el-dropdown placement="bottom-end" @command="changeLanguage" ref="header_languages">
          <el-button color="#4d4d4d" link>
            <Icon name="wac-icon:language"/>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <template v-for="item in locales">
                <el-dropdown-item :command="item">{{ item.name }}</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <NuxtLinkLocale to="/tools">
          <el-icon size="24">
            <Grid/>
          </el-icon>
        </NuxtLinkLocale>
      </div>
    </div>
  </el-header>
</template>

<style scoped lang="scss">
.header_menus {
  display: inline-flex;
  justify-content: start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;

  > .el-image {
    margin-right: 16px;
    background: #ffffff;
  }

  :deep(.el-menu--horizontal) {
    width: 80%;

    > .el-menu-item {
      color: #ffffff;
    }

    > .el-sub-menu {
      .el-sub-menu__title {
        color: #ffffff;
      }
    }

    .el-menu-item:not(.is-disabled):hover, .el-menu-item:not(.is-disabled):focus {
      background-color: #4d4d4d;
    }
  }

  .header_right {
    display: inline-flex;
    justify-content: end;
    align-items: center;
    width: 20%;

    .el-button:focus-visible {
      outline: none;
    }

    .icon, .el-icon {
      margin-left: 16px;
      color: #ffffff;
    }

    > a {
      display: inline-flex;
    }
  }
}
</style>